{% extends "base.html" %}

{% block title %}使用帮助 - SteHub{% endblock %}

{% block content %}
<div class="row">
    <div class="col-lg-3">
        <!-- 帮助导航 -->
        <div class="card sticky-top" style="top: 100px;">
            <div class="card-header">
                <h6 class="mb-0">帮助目录</h6>
            </div>
            <div class="card-body p-0">
                <div class="list-group list-group-flush">
                    <a href="#getting-started" class="list-group-item list-group-item-action">快速开始</a>
                    <a href="#forum-guide" class="list-group-item list-group-item-action">论坛使用</a>
                    <a href="#chat-guide" class="list-group-item list-group-item-action">聊天功能</a>
                    <a href="#account-guide" class="list-group-item list-group-item-action">账户管理</a>
                    <a href="#faq" class="list-group-item list-group-item-action">常见问题</a>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-9">
        <div class="card">
            <div class="card-header">
                <h2 class="mb-0"><i class="fas fa-question-circle me-2"></i>SteHub 使用帮助</h2>
            </div>
            <div class="card-body">
                <!-- 快速开始 -->
                <section id="getting-started" class="mb-5">
                    <h4 class="border-bottom pb-2">🚀 快速开始</h4>
                    
                    <h5>1. 注册账户</h5>
                    <p>点击右上角"注册"按钮，填写用户名、邮箱和密码即可创建账户。</p>
                    
                    <h5>2. 完善个人资料</h5>
                    <p>登录后可以在个人资料页面设置头像、个人简介等信息。</p>
                    
                    <h5>3. 开始探索</h5>
                    <p>浏览论坛、参与讨论或加入聊天室开始使用平台。</p>
                </section>

                <!-- 论坛使用指南 -->
                <section id="forum-guide" class="mb-5">
                    <h4 class="border-bottom pb-2">💬 论坛使用指南</h4>
                    
                    <h5>发布帖子</h5>
                    <ul>
                        <li>点击导航栏"论坛"进入论坛页面</li>
                        <li>点击"发布新帖"按钮</li>
                        <li>选择合适分类，填写标题和内容</li>
                        <li>支持Markdown格式和图片上传</li>
                    </ul>
                    
                    <h5>回复和互动</h5>
                    <ul>
                        <li>在帖子页面底部可以回复帖子</li>
                        <li>支持点赞功能</li>
                        <li>可以收藏感兴趣的帖子</li>
                    </ul>
                    
                    <h5>分类浏览</h5>
                    <p>论坛分为四个主要分类：</p>
                    <ul>
                        <li><span class="badge bg-primary">学习交流</span> - 作业讨论、课程答疑</li>
                        <li><span class="badge bg-success">资源共享</span> - 学习资料、工具推荐</li>
                        <li><span class="badge bg-danger">兴趣社区</span> - 编程、游戏、艺术等</li>
                        <li><span class="badge bg-warning">生活闲聊</span> - 日常话题、校园生活</li>
                    </ul>
                </section>

                <!-- 聊天功能指南 -->
                <section id="chat-guide" class="mb-5">
                    <h4 class="border-bottom pb-2">💭 聊天功能指南</h4>
                    
                    <h5>公共聊天室</h5>
                    <ul>
                        <li>任何人都可以加入公共聊天室</li>
                        <li>支持实时群聊功能</li>
                        <li>聊天记录会自动保存</li>
                    </ul>
                    
                    <h5>创建聊天室</h5>
                    <ul>
                        <li>登录用户可以创建自己的聊天室</li>
                        <li>可以设置聊天室为公开或私有</li>
                        <li>可以管理聊天室成员</li>
                    </ul>
                    
                    <h5>私聊功能</h5>
                    <ul>
                        <li>点击用户头像可以发起私聊</li>
                        <li>私聊内容完全加密</li>
                        <li>支持离线消息</li>
                    </ul>
                </section>

                <!-- 账户管理 -->
                <section id="account-guide" class="mb-5">
                    <h4 class="border-bottom pb-2">👤 账户管理</h4>
                    
                    <h5>修改个人资料</h5>
                    <p>在个人资料页面可以修改用户名、邮箱、头像和个人简介。</p>
                    
                    <h5>密码安全</h5>
                    <ul>
                        <li>定期修改密码确保账户安全</li>
                        <li>如果忘记密码可以使用"忘记密码"功能重置</li>
                        <li>建议使用强密码组合</li>
                    </ul>
                    
                    <h5>隐私设置</h5>
                    <p>平台尊重用户隐私，不会泄露个人信息给第三方。</p>
                </section>

                <!-- 常见问题 -->
                <section id="faq">
                    <h4 class="border-bottom pb-2">❓ 常见问题</h4>
                    
                    <div class="accordion" id="faqAccordion">
                        <div class="accordion-item">
                            <h5 class="accordion-header">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
                                    平台是免费的吗？
                                </button>
                            </h5>
                            <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    是的，SteHub 是完全免费的，没有任何隐藏费用。
                                </div>
                            </div>
                        </div>
                        
                        <div class="accordion-item">
                            <h5 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">
                                    如何找回密码？
                                </button>
                            </h5>
                            <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    在登录页面点击"忘记密码"，输入注册邮箱即可收到重置链接。
                                </div>
                            </div>
                        </div>
                        
                        <div class="accordion-item">
                            <h5 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3">
                                    可以删除自己的帖子吗？
                                </button>
                            </h5>
                            <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    可以，在帖子页面点击"删除"按钮即可删除自己发布的帖子。
                                </div>
                            </div>
                        </div>
                        
                        <div class="accordion-item">
                            <h5 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq4">
                                    如何联系管理员？
                                </button>
                            </h5>
                            <div id="faq4" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    可以通过"联系我们"页面或直接发送邮件到管理员邮箱。
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// 平滑滚动到锚点
document.addEventListener('DOMContentLoaded', function() {
    const links = document.querySelectorAll('a[href^="#"]');
    
    links.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });
});
</script>
{% endblock %}